import React from 'react';
import {
  Box,
  Container,
  Typography,
  Button,
  Rating,
  Chip,
  Stack,
  IconButton,
} from '@mui/material';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ShareIcon from '@mui/icons-material/Share';

interface GameHeroProps {
  game: {
    title: string;
    coverImage: string;
    thumbnailImage: string;
    developer: string;
    publisher: string;
    releaseDate: string;
    rating: number;
    reviewCount: number;
    price: string;
    tags: string[];
  };
}

const GameHero: React.FC<GameHeroProps> = ({ game }) => {
  return (
    <Box
      sx={{
        position: 'relative',
        height: { xs: 'auto', md: '500px' },
        color: 'white',
        '&::before': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: `url(${game.coverImage})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          filter: 'blur(2px)',
          zIndex: -1,
        },
        '&::after': {
          content: '""',
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.9) 100%)',
          zIndex: -1,
        },
      }}
    >
      <Container maxWidth="lg" sx={{ py: 4 }}>
        <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 4 }}>
          {/* 游戏封面缩略图 */}
          <Box
            component="img"
            src={game.thumbnailImage}
            alt={game.title}
            sx={{
              width: { xs: '100%', md: '300px' },
              height: 'auto',
              borderRadius: 2,
              boxShadow: 3,
            }}
          />

          {/* 游戏信息 */}
          <Box sx={{ flex: 1 }}>
            <Typography variant="h3" component="h1" gutterBottom>
              {game.title}
            </Typography>

            <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 2 }}>
              <Rating value={game.rating} precision={0.5} readOnly />
              <Typography variant="body2">
                ({game.reviewCount} 条评论)
              </Typography>
            </Stack>

            <Typography variant="subtitle1" sx={{ mb: 2 }}>
              开发商：{game.developer}
            </Typography>
            <Typography variant="subtitle1" sx={{ mb: 2 }}>
              发行商：{game.publisher}
            </Typography>
            <Typography variant="subtitle1" sx={{ mb: 3 }}>
              发布日期：{game.releaseDate}
            </Typography>

            <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', mb: 3 }}>
              {game.tags.map((tag, index) => (
                <Chip
                  key={index}
                  label={tag}
                  variant="outlined"
                  sx={{ color: 'white', borderColor: 'white' }}
                />
              ))}
            </Box>

            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <Button
                variant="contained"
                size="large"
                sx={{ minWidth: 200 }}
              >
                立即购买 {game.price}
              </Button>
              <IconButton color="primary">
                <FavoriteIcon />
              </IconButton>
              <IconButton color="primary">
                <ShareIcon />
              </IconButton>
            </Box>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default GameHero;
